<template>
	<view class="app">
		<view class="wrapper">
			<view class="left-top-sign">LOGIN</view>
			<view class="welcome">
				{{$t('clogin.msg.pleasebindaccount')}}
			</view>

			<view class="input-content" >
				<view class="input-item">
					<text class="tit">{{$t('clogin.label.account')}}</text>
					<view class="row">
						<input v-model="param.username" type="text" maxlength="20"  
							placeholder-style="color: #909399" />
					</view>
				</view>
				<view class="input-item">
					<text class="tit">{{$t('clogin.label.password')}}</text>
					<view class="row">
						<input v-model="param.password" type="password" maxlength="20"  
							placeholder-style="color: #909399" />
					</view>
				</view>
				<button type="default" class="c-default" @click="clickLogin">{{$t("clogin.label.login")}}</button>
				<button type="default" style="margin-top: 20px;" @click="clickRegister">{{$t("clogin.msg.redirectregister")}}</button>
			</view>
			<view class="agreement ">
				<view @click="checkAgreement">{{$t('clogin.msg.agreewhilelogin')}}</view>
				<view class="tit" @click="clickService">{{$t('clogin.label.userservice')}}</view>
				<view class="tit" @click="clickPrivate">{{$t('clogin.label.privacypolicy')}}</view>
			</view>
			 
		</view>
 
	</view>	
</template>

<script>
	//import clogin from '@/static/assets/clogin/js/clogin.js'
	export default {
		data() {
			return {
				sp: {
					openid: null, //bindmobile,bindopenid
					mobile: null, //bindmobile情况下为mobile,bindopenid情况下为openid
				},
				param: {
					username: null,
					password: null,
				},
			}
		},
		onLoad(options) {
			let that = this;
			that.sp.openid = options.openid;
			that.sp.mobile = options.mobile;
		},
		methods: {
			clickService: function() {
				let that = this;
				uni.navigateTo({
					url: '/pages/csmwj/cloginpolicy?type=service'
				});
			},
			clickPrivate: function() {
				let that = this;
				uni.navigateTo({
					url: '/pages/csmwj/cloginpolicy?type=private'
				});
			},
			clickLogin: function() {
				let that = this;
				that.$u.clogin.unirequest("/csmwj/cloginuser/bindlogin", {
					openid: that.sp.openid,
					mobile: that.sp.mobile,
					username: that.param.username,
					password: that.param.password
				}, function(res) {
					//alert(JSON.stringify(res.data.third));
					that.$u.clogin.setSessionThird(res.data.token,res.data.mobile,res.data.third);
					that._closeAndRefreshParentView();
				});
			},
			clickRegister:function(){
				let that = this;
				that.$u.clogin.unirequest("/csmwj/cloginuser/postregister", {
					openid: that.sp.openid,
					mobile: that.sp.mobile
				}, function(res) {
					that.$u.clogin.setSessionThird(res.data.token,res.data.mobile,res.data.third);
					that._closeAndRefreshParentView();
				});	
			},
			_closeAndRefreshParentView: function() {
				let that = this;
				uni.navigateBack({
					success: () => {
						let page = getCurrentPages().pop(); //跳转页面成功之后
						if (!page) {
							return;
						} else {
							//#ifdef MP-WEIXIN	
							page.onLoad(page.options); // page自带options对象.
							//#endif
							//#ifndef MP-WEIXIN
								window.location = that.$u.clogin.getSessionSourcepageurl();						
							//#endif
						}
						
					}
				});
			},
		}
	}
</script>

<style lang="scss">


 

	.back-btn {
		position: absolute;
		left: 20rpx;
		top: calc(var(--status-bar-height) + 20rpx);
		z-index: 90;
		padding: 20rpx;
		font-size: 32rpx;
		color: #606266;
	}

	.left-top-sign {
		font-size: 120rpx;
		color: #f8f8f8;
		position: relative;
		left: -12rpx;
	}

	.right-top-sign {
		position: absolute;
		top: 80rpx;
		right: -30rpx;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: "";
			width: 400rpx;
			height: 80rpx;
			background: #b4f3e2;
		}

		&:before {
			transform: rotate(50deg);
			border-top-right-radius: 50px;
		}

		&:after {
			position: absolute;
			right: -198rpx;
			top: 0;
			transform: rotate(-50deg);
			border-top-left-radius: 50px;
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270rpx;
		bottom: -320rpx;
		border: 100rpx solid #d0d1fd;
		border-radius: 50%;
		padding: 180rpx;
	}

	.welcome {
		position: relative;
		left: 50rpx;
		top: -90rpx;
		font-size: 46rpx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
	}

	.input-content {
		padding: 0 60rpx;
	}

	.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30rpx;
		background: #f8f6fc;
		height: 120rpx;
		border-radius: 4px;
		margin-bottom: 50rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.row {
			width: 100%;
		}

		.tit {
			height: 50rpx;
			line-height: 56rpx;
			font-size: 26rpx;
			color: #606266;
		}

		input {
			flex: 1;
			height: 60rpx;
			font-size: 30rpx;
			color: #303133;
			width: 100%;
		}
	}

	/* 其他登录方式 */
	.other-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20rpx;
		margin-top: 80rpx;

		.line {
			margin-bottom: 40rpx;

			.tit {
				margin: 0 32rpx;
				font-size: 24rpx;
				color: #606266;
			}

			&:before,
			&:after {
				content: '';
				width: 160rpx;
				height: 0;
				border-top: 1px solid #e0e0e0;
			}
		}

		.item {
			font-size: 24rpx;
			color: #606266;
			background-color: #fff;
			border: 0;

			&:after {
				border: 0;
			}
		}

		.icon {
			width: 90rpx;
			height: 90rpx;
			margin: 0 24rpx 16rpx;
		}
	}

	.agreement {
 
		padding-top: 20px;
		font-size: 12px;
		color: #999;
		text-align: center;

		.mix-icon {
			font-size: 36rpx;
			color: #ccc;
			margin-right: 8rpx;
			margin-top: 1px;

			&.active {
				//color: $base-color;
			}
		}

		.tit {
			color: #40a2ff;
		}
	}
</style>
